<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h4>简单的缩略图</h4>

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
            </div>
        </div>
    </div>


    <h3>复杂的缩略图</h3>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
                </a>
                <div class="caption">
                    <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
                <div class="caption">
                    <h3>Bootstrap框架系列教程</h3>
                    <p> Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
                <div class="caption">
                    <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>
                <div class="caption">
                    <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--下面是代码任务部分-->
    <h2>下面是代码任务部分</h2>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
                </a>

            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>

            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>

            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
                </a>

            </div>
        </div>
    </div>

    <!--警示框-->
    <h4>警示框</h4>

    <h2>默认警示框</h2>
    <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
    <div class="alert alert-info" role="alert">请输入正确的密码</div>
    <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
    <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
    <h2>可关闭的警示框</h2>
    <div class="alert alert-success alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 恭喜您操作成功！
    </div>
    <div class="alert alert-info alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 请输入正确的密码
    </div>
    <div class="alert alert-warning alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 您已操作失败两次，还有最后一次机会
    </div>
    <div class="alert alert-danger alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 对不起，您输入的密码有误
    </div>
    <h2>警示框的链接</h2>
    <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read
        <a href="#" class="alert-link">this important alert message</a> .
    </div>
    <div class="alert alert-info" role="alert">
        <strong>Heads up!</strong> This
        <a href="#" class="alert-link">alert needs your attention</a> , but it's not super important.
    </div>
    <div class="alert alert-warning" role="alert">
        <strong>Warning!</strong> Better check yourself, you're
        <a href="#" class="alert-link">not looking too good</a> .
    </div>
    <div class="alert alert-danger" role="alert">
        <strong>Oh snap!</strong>
        <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>

    <!--警示框--默认警示框-->
    <h4>警示框--默认警示框</h4>

    <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
    <div class="alert alert-info" role="alert">请输入正确的密码</div>
    <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
    <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
    <br/><br/>

    <!--警示框--可关闭的警示框-->
    <h4>警示框--可关闭的警示框</h4>
    <div class="alert alert-success alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 恭喜您操作成功！
    </div>
    <div class="alert alert-info alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 请输入正确的密码
    </div>
    <div class="alert alert-warning alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 您已操作失败两次，还有最后一次机会
    </div>
    <div class="alert alert-danger alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button> 对不起，您输入的密码有误
    </div>
    <!--下面是代码部分-->
    <h2>下面是代码部区</h2>
    <div class="alert alert-info" role="alert">请修改相应信息</div>
    <div class="alert alert-success" role="alert">谢谢，操作成功！</div>
    <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
    <div class="alert alert-danger" role="alert">对不起，您刚才的操作失败</div>

    <!--警示框--警示框的链接-->
    <h4>警示框--警示框的链接</h4>

    <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read
        <a href="#" class="alert-link">this important alert message</a> .
    </div>
    <div class="alert alert-info" role="alert">
        <strong>Heads up!</strong> This
        <a href="#" class="alert-link">alert needs your attention</a> , but it's not super important.
    </div>
    <!--下面代码任务部分-->
    <h2>下面是代码部分</h2>
    <div class="alert alert-warning" role="alert">
        <strong>Warning!</strong> Better check yourself, you're not looking too good .
    </div>
    <div class="alert alert-danger" role="alert">
        <strong>Oh snap!</strong>Change a few things up and try submitting again.
    </div>


    <!--基本进度条-->
    <h2>基本进度条</h2>
    <div class="progress">
        <div class="progress-bar" style="width:40%">
        </div>
    </div>
    <h2>彩色进度条</h2>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width:60%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" style="width:80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width:50%"></div>
    </div>
    <h2>条纹进度条</h2>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-success" style="width:40%"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-info" style="width:60%"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-warning" style="width:80%"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-danger" style="width:50%"></div>
    </div>
    <h2>动态条纹进度条</h2>
    <p>要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。</p>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" style="width:40%"></div>
    </div>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-info" style="width:60%"></div>
    </div>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-warning" style="width:80%"></div>
    </div>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" style="width:50%"></div>
    </div>
    <h2>层叠进度条</h2>
    <h5>正常层叠进度条</h5>
    <p>层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果</p>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:10%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:15%"></div>
    </div>
    <h5>不良效果层叠进度条</h5>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:40%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:45%"></div>
    </div>
    <h5>层叠条纹进度条</h5>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:20%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:15%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
    </div>
    <h2>带Label的进度条</h2>
    <h5>进度条1</h5>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
    </div>

    <h5>进度条2</h5>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
    </div>

    <!--媒体对象-->
    <h4>媒体对象</h4>

    <h3>默认媒体对象</h3>
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">系列：十天精通CSS3</h4>
            <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
        </div>
    </div>
    <h3>媒体对象的嵌套</h3>
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">我是大漠</h4>
            <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">慕课网</h4>
                    <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">W3cplus</h4>
                            <div>W3cplus站上还有很多教程....</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h3>媒体对象列表</h3>
    <ul class="media-list">
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">我是大漠</h4>
                <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
            </div>
        </li>
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">慕课网</h4>
                <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
            </div>
        </li>
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">W3cplus</h4>
                <div>W3cplus站上还有很多教程....</div>
            </div>
        </li>
    </ul>

    <!--列表-->
    <h4>列表</h4>

    <h3>基础列表组</h3>
    <ul class="list-group">
        <li class="list-group-item">揭开CSS3的面纱</li>
        <li class="list-group-item">CSS3选择器</li>
        <li class="list-group-item">CSS3边框</li>
        <li class="list-group-item">CSS3背景</li>
        <li class="list-group-item">CSS3文本</li>
    </ul>
    <h3>带徽章的列表组</h3>
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">13</span>揭开CSS3的面
        </li>
        <li class="list-group-item">
            <span class="badge">456</span>CSS3选择器
        </li>
        <li class="list-group-item">
            <span class="badge">892</span>CSS3边框
        </li>
        <li class="list-group-item">
            <span class="badge">90</span>CSS3背景
        </li>
        <li class="list-group-item">
            <span class="badge">1290</span>CSS3文本
        </li>
    </ul>
    <h3>带链接的列表组</h3>
    <ul class="list-group">
        <li class="list-group-item">
            <a href="##">揭开CSS3的面</a>
        </li>
        <li class="list-group-item">
            <a href="##">CSS3选择器</a>
        </li>
        <li class="list-group-item">
            <a href="##">CSS3边框</a>
        </li>
        <li class="list-group-item">
            <a href="##">CSS3背景</a>
        </li>
        <li class="list-group-item">
            <a href="##">CSS3文本</a>
        </li>
    </ul>
    <p>就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换</p>
    <h3>带链接的列表组2</h3>
    <div class="list-group">
        <a href="##" class="list-group-item">图解CSS3</a>
        <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
        <a href="##" class="list-group-item">玩转Bootstrap</a>
    </div>

    <h3>自定义列表组</h3>
    <div class="list-group">
        <a href="##" class="list-group-item">
            <h4 class="list-group-item-heading">图解CSS3</h4>
            <p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
        </a>
        <a href="##" class="list-group-item">
            <h4 class="list-group-item-heading">Sass中国</h4>
            <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
        </a>
    </div>
    <h3>组合列表项的状态</h3>
    <div class="list-group">
        <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
        <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
        <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
        <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
    </div>
    <h3>多彩列表组</h3>
    <div class="list-group">
        <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
        <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
        <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
        <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
        <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
    </div>

    <!--面板-->
    <h4>面板</h4>
    <h3>基础面板</h3>
    <div class="panel panel-default">
        <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
    </div>
    <h3>带有头和尾的面板</h3>
    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <h3>彩色面板</h3>
    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body"> 详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <h3>面板中嵌套表格</h3>
    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
            <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
            </p>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>＃</th>
                        <th>我的书</th>
                        <th>发布时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>《图解CSS3》</td>
                        <td>2014-07-10</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <!--model-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>